<template>
	<view class="centers">
		<view class="inv-h-ws">
			<view :class="['inv-hs',Inv==0?'inv-h-ses':'']" @click="Inv=0">
				<view class="tab-cen">
					<image src="../../../static/my/pj.png" mode=""></image>
					<view >评论</view>
				</view>
			</view>
			<view :class="['inv-hs',Inv==1?'inv-h-ses':'']" @click="Inv=1">
				<view  class="tab-cen">
					<image src="../../../static/home/serve.png" mode=""></image>
					<view>收藏</view>
				</view>
			</view>
			<view :class="['inv-hs',Inv==2?'inv-h-ses':'']" @click="Inv=2">
				<view  class="tab-cen">
					<image src="../../../static/my/hz.png" mode=""></image>
					<view>评论</view>
				</view>
			</view>
		</view>
		<view class="" v-show="Inv == 0">
			<view class="comment">
				<view class="comments">
					<view class="comments-img">
						<image src="../../../static/logo.png" mode=""></image>
					</view>
					<view class="comments-text">
						<view>
							<text class="name-nv">小仙女</text>
							评论了你
						</view>
						<view style="margin-top: 15rpx;">真好看哦，哈哈哈哈哈哈哈。。。</view>
					</view>
					<view class="comments-data">
						20分钟前
					</view>
				</view>
				<view class="comments-bottom" v-if="true">
					<view class="bom-text">
						看东方博客
					</view>
				</view>
			</view>
			
		</view>
		<view class="" v-show="Inv == 1">
			<view class="favorites">
				<view class="favorites-img">
					<image src="../../../static/logo.png" mode=""></image>
				</view>
				<view class="favorites-left">
					<view class="favorites-left-top">
						<text class="favorites-nv">小仙女</text>
						<text class="favorites-sc">收藏了你</text>
						<text class="favorites-data">20分钟</text>
					</view>
					<view class="favorites-btm">
						<view class="favorites-btm-left">很爱很爱你，这就是瓜子脸留空气刘海好看，哈哈。。</view>
						<view class="favorites-btm-img">
							<image src="../../../static/logo.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="fans" v-show="Inv == 2">
			<view class="fans-cen">
				<view class="fans-img">
					<image src="../../../static/home/rong.png" mode=""></image>
				</view>
				<view class="fans-text">
					<view class="nv">小仙女 <text class="fans-gz">关注了你</text></view>
					<view class="data">20分钟前</view>
				</view>
				<view class="fans-but">
					<text class="but">回粉</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		props:{
			
		},
		data() {
			return {
				Inv: 0,
				
			}
		},
		methods: {
			changeTab(Inv) {
				that.navIdx = Inv;

			},
		}
	}
</script>


<style lang="scss">
	.centers{
		padding: 0 20rpx;
	}
	.inv-h-ws {
		background-color: #FFFFFF;		
		padding: 50rpx 50rpx;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		border-bottom: 1rpx solid #ccc;
		
		.tab-cen{
			
			line-height: 50rpx;
			
			image{
				width: 50rpx;
				height: 50rpx;
				
			}
			
		}
	}
	.fans{
		// padding: 0 20rpx;
		border-bottom: 1rpx solid #F3F3F3;
		
		.fans-cen{
			padding: 20rpx 0;
			display: flex;
			
			
			.fans-img{
				width: 10%;
				
				image{
					width: 50rpx;
					height: 50rpx;
					border-radius: 50rpx;
				}
			}
			.fans-text{
				width: 80%;
				
				.nv{
					color:#00C6C2 ;
					font-size: 24rpx;
					
					.fans-gz{
						font-size: 26rpx;
						color: #333;
					}
				}
				.data{
					color: #ccc;
					font-size: 24rpx;
				}
			}
			.fans-but{
				width: 20%;
				display: flex;
				align-items: center;
				
				text{
					display: inline-block;
					color: #00c6c2;
					font-size: 26rpx;
				}
				.but{
					padding: 5rpx 20rpx;
					border: 1rpx solid #00c6c2;
					border-radius: 40rpx;
				}
			}
		}
	}
	.favorites{
		padding:20rpx 0;
		display: flex;
		border-bottom: 1rpx solid #F3F3F3;
		
		.favorites-img{
			width: 10%;
			padding: 10rpx 0;
			
			image{
				width: 50rpx;
				height: 50rpx;
				border-radius: 40rpx;
			}
		}
		.favorites-left{
			width:90%;
			margin-left: 5rpx;
			
			.favorites-left-top{
				line-height: 60rpx;
				display: flex;
				align-items: center;
				
				text{
					display: block;
				}
				.favorites-nv{
					color: red;
					font-size: 25rpx;
					width: 14%;
				}
				.favorites-sc{
					font-size: 26rpx;
					margin-left: 20rpx;
					width: 70%;
				}
				.favorites-data{
					font-size: 22rpx;
					color: #ccc;
				}
			}
			.favorites-btm{
				padding: 15rpx;
				background-color: #F3F3F3;
				display: flex;
				align-items: flex-end;
				
				.favorites-btm-left{
					font-size: 25rpx;
				}
				.favorites-btm-img{
					width: 30%;
					
					image{
						width: 100%;
						height: 80rpx;
					}
				}
			}
		}
	}
	.comment{
		padding: 20rpx;
		
		border-bottom: 1rpx solid #F3F3F3;
	}
	.comments{
		// padding: 20rpx;
		display: flex;
		
		
		.comments-img{
			width: 10%;
			display: flex;
			align-items: center;
			
			image{
				width: 50rpx;
				height: 50rpx;
				border-radius: 40rpx;
			}
		}
		.comments-text{
			width: 70%;
			font-size: 26rpx;
			
			.name-nv{
				color: red;
				color: 25rpx;
				margin-right: 10rpx;
			}
		}
		.comments-data{
			display: flex;
			align-items: center;
			text-align: center;
			justify-content: center;
			width: 20%;
			font-size: 25rpx;
			color: #ccc;
		}
	}
	.comments-bottom{
		padding:5rpx 0 15rpx 70rpx;
		
		.bom-text{
			line-height: 60rpx;
			font-size: 24rpx;
			padding: 0 20rpx;
			background-color:#F3F3F3;
		}
		
	}
	.inv-hs {
		font-size: 30upx;
		flex: 1;
		text-align: center;
		color: #666;
		height: 100upx;
		line-height: 100upx;
	}

	.inv-h-ses {
		font-weight: bold;
		color: #5BA7FF;
		// height: 2rpx;
		// background-color: #5BA7FF;
		// border-bottom: 1rpx solid #5BA7FF;
		
		
	}

	page {
		background-color: #fff;
	}
</style>
